<template>
  <!-- 退货申请处理 returnApply -->
  <!-- 搜索区域 -->
  <el-card class="box_card_search" shadow="never">
    <!-- 重置搜索按钮 -->
    <div class="search_header">
      <div class="search_icon">
        <el-icon><Search /></el-icon><span>筛选搜索</span>
      </div>
      <div class="search_btn">
        <el-button @click="resetIpt">重置</el-button>
        <el-button type="primary" @click="changeIpt">查询搜索</el-button>
      </div>
    </div>
    <!-- 搜索框 -->
    <el-form
      :inline="true"
      class="demo-form-inline"
      ref="ruleFormRef"
      :model="searchForm"
      label-width="140px"
    >
      <el-form-item label="输入搜索：" prop="id">
        <el-input placeholder="服务单号" v-model="searchForm.id" />
      </el-form-item>
      <el-form-item label="处理状态：" prop="status">
        <el-select placeholder="全部" v-model="searchForm.status">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间：" prop="createTime">
        <el-date-picker
          v-model="searchForm.createTime"
          type="date"
          placeholder="请选择时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="操作人员：" prop="handleMan">
        <el-input placeholder="全部" v-model="searchForm.handleMan" />
      </el-form-item>
      <el-form-item label="处理时间：" prop="handleTime">
        <el-date-picker
          v-model="searchForm.handleTime"
          type="date"
          placeholder="请选择时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 新增 -->
  <el-card class="box_card_add" v-permission="'addUser'" shadow="never">
    <div class="add_btn">
      <div class="add_icon">
        <el-icon><Tickets /></el-icon><span>数据列表</span>
      </div>
      <el-button type="primary" v-if="false">添加</el-button>
    </div>
  </el-card>
  <!-- 表格 -->
  <el-table
    :data="tableList"
    border
    style="width: 100%"
    table-layout="auto"
    @select="selectFn"
    @select-all="selectAllFn"
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="服务单号" prop="id" align="center" />
    <el-table-column label="申请时间" align="center">
      <template #default="scope">{{ scope.row.createTime }}</template>
    </el-table-column>
    <el-table-column label="用户账号" prop="memberUsername" align="center" />
    <el-table-column label="退款金额" align="center">
      <template #default="scope">{{
        moneyFormat(scope.row.productRealPrice)
      }}</template>
    </el-table-column>
    <el-table-column label="申请状态" align="center">
      <template #default="scope">{{ statusFn(scope.row.status) }}</template>
    </el-table-column>
    <el-table-column label="处理时间" align="center">
      <template #default="scope">{{ scope.row.handleTime }}</template>
    </el-table-column>
    <el-table-column label="操作" align="center" fixed="right">
      <template #default="scope"
        ><el-button size="small" @click="examineFn(scope.row.id)"
          >查看详情</el-button
        ></template
      >
    </el-table-column>
  </el-table>
  <!-- 底部 批量操作 分页器 -->
  <div class="bottom">
    <!-- 批量操作 下拉框 -->
    <div>
      <el-select class="m-2" placeholder="批量删除" v-model="seleOper">
        <el-option
          v-for="item in seleData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="deleteFn">确定</el-button>
    </div>
    <!-- 分页器 -->
    <el-pagination
      background
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[5, 10, 15]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { Search, Tickets } from "@element-plus/icons-vue";
import useTable from "@/hooks/useTable";
import { computed, reactive, ref } from "vue";
import { ElMessage, ElMessageBox, type FormInstance } from "element-plus";
import { useRouter } from "vue-router";
import type { IReturnApplyListParams, IReturnApplyList } from "@/types/global";
import * as order from "@/request/modules/order";
import * as admin from "@/request/modules/admin";

const router = useRouter();
// 搜索框 form 表单DOM
const ruleFormRef = ref<FormInstance>();
// 搜索框
const searchForm = reactive<IReturnApplyListParams>({
  id: undefined, // 服务单号
  status: undefined, // 申请状态：0->待处理；1->退货中；2->已完成；3->已拒绝
  createTime: "", // 申请时间
  handleMan: "", // 处理人员
  handleTime: "", // 处理时间
  receiverKeyword: "", // 收货人姓名/号码
});
// 申请状态 列表
let statusOptions = reactive([
  {
    value: 0,
    label: "待处理",
  },
  {
    value: 1,
    label: "退货中",
  },
  {
    value: 2,
    label: "已完成",
  },
  {
    value: 3,
    label: "已拒绝",
  },
]);
// 返回申请状态
const statusFn = computed(() => {
  return (status: number) => {
    let arr = statusOptions.find((item) => item.value === status);
    return arr?.label;
  };
});
// 返回金钱格式
const moneyFormat = computed(() => {
  return (Price: number) => {
    if (!Price) return;
    return "￥" + Price.toFixed(2);
  };
});
// 批量删除 选中
const seleOper = ref(1);
// 批量删除 列表
const seleData = reactive([
  {
    value: 1,
    label: "批量删除",
  },
]);
// 选中的列表
const selectList = ref<number[]>([]);
// 复选框按钮
const selectFn = (selection: IReturnApplyList[]) => {
  selectList.value = selection.map((item) => item.id);
};
// 全选按钮
const selectAllFn = (selection: IReturnApplyList[]) => {
  selectList.value = selection.map((item) => item.id);
};
// 批量删除 按钮
const deleteFn = () => {
  ElMessageBox.confirm("是否要进行删除操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await order.APIReturnApplyDelete({
        ids: selectList.value.join(","),
      });
      // console.log(res);
      if (res.code === 200) {
        ElMessage.success("删除成功！");
      } else {
        ElMessage.error("删除失败！");
      }
    })
    .catch(() => {});
};
// 调用封装组件
const {
  tableList,
  pagination,
  fetchData,
  handleSizeChange,
  handleCurrentChange,
} = useTable(order.APIReturnApplyList, {
  pageNum: 1,
  pageSize: 5,
});

// 查询搜索按钮
const changeIpt = () => {
  // console.log(searchForm.id);
  if (!searchForm.id) fetchData();
  if (searchForm.id && searchForm.id % 1 !== 0) {
    ElMessage.error("服务单号必须是正整数");
  }
  fetchData();
};
// 重置
const resetIpt = () => {
  ruleFormRef.value?.resetFields();
  fetchData();
};
// 查看详情 按钮
const examineFn = (id: number) => {
  // router.push(`returnApplyDetail?id=${id}`);
  router.push({ path: "returnApplyDetail", query: { id: id } });
};
</script>
<style lang="less" scoped>
// 搜索区域
.box_card_search {
  font-size: 14px;
  margin-bottom: 20px;
  .search_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search_icon {
      display: flex;
      align-items: center;
      span {
        padding-left: 10px;
      }
    }
    .search_btn {
      display: flex;
      align-items: center;
      button {
        margin-left: 20px;
        padding: 9px 15px;
        font-size: 12px;
      }
    }
  }
  .el-form {
    padding: 20px 0 0;
    .el-form-item {
      width: 330px;
    }
  }
}
// 新增
.box_card_add {
  margin-bottom: 20px;
  font-size: 14px;
  .add_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .add_icon {
      display: flex;
      align-items: center;
      span {
        padding-left: 10px;
      }
    }
    button {
      margin-left: 20px;
      padding: 9px 15px;
      font-size: 12px;
    }
  }
}
// 分页器
.bottom {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-select {
    margin-right: 20px;
  }
}
</style>
